<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>系统后台管理</title>
    <#include "public/public_css.ftl">

    <link rel="stylesheet" type="text/css" href="../../css/lib/fileinput.min.css">

</head>

<body>

<div id="wrapper">
    <#-- s 导航 -->
    <#include "public/nav.ftl">
    <#-- e 导航 -->

    <#-- s 页面内容 -->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">商品列表</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-10">
                <!-- /.panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart-o fa-fw"></i> 商品列表
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-10">
                                <button type="button" class="btn btn-default" data-toggle="modal"
                                        data-target="#addHomeTitle">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                    发布商品
                                </button>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover table-striped">
                                        <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>商品编号</th>
                                            <th>游戏类型</th>
                                            <th>系统类型</th>
                                            <th>商品图片</th>
                                            <th>商品价格</th>
                                            <th>商品权重</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <#list list as goods>
                                        <tr>
                                            <td>${goods_index+1 }</td>
                                            <td>${goods.goodsNo }</td>
                                            <td><#if goods.goodsType == 1>
                                                    原神
                                            </#if></td>
                                            <td>${goods.goodsSys }</td>
                                            <td><img width="200px" src="${goods.goodsImage }" /></td>
                                            <td>${goods.goodsPrice }</td>
                                            <td>${goods.goodsWeight }</td>

                                            <th>
                                                <button type="button" class="btn btn-default" value="${goods.id?c }" name="btnUpdGoods" >
                                                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                                    修改
                                                </button>
                                                <button name="delBtn" value="${goods.id?c }" type="button" class="btn btn-default">
                                                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                                    删除
                                                </button>
                                                <button type="button" class="btn btn-default" value="${goods.id?c }" name="btnGoodsDetails" >
                                                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                                    编辑详情页
                                                </button>
                                            </th>
                                        </tr>
                                        </#list>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.table-responsive -->
                                <div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
                            </div>
                            <!-- /.col-lg-4 (nested) -->
                            <div class="col-lg-8">
                                <div id="morris-bar-chart"></div>
                            </div>
                            <!-- /.col-lg-8 (nested) -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>

        </div>
        <!-- /.row -->
    </div>
    <#-- e 页面内容 -->

</div>


<!-- Modal -->
<div class="modal fade" id="addHomeTitle" tabindex="-1" role="dialog" aria-labelledby="addHomeTitleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">发布商品</h4>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="id_title_url" class="col-sm-2 col-form-label">游戏</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="goodsType">
                            <option value="1">原神</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="id_title_url" class="col-sm-2 col-form-label">系统</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="goodsSys">
                            <option value="官服">官服</option>
                            <option value="B服" >B服</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="id_home_title" class="col-sm-2 col-form-label">商品价格</label>
                    <div class="col-sm-8">
                        <input nkeyup="value=value.replace(/[^\d.]/g,'')" id="goodsPrice" name="titleName"  placeholder="商品价格"  class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="id_home_title" class="col-sm-2 col-form-label">商品图片</label>
                        <div class="col-sm-8">
                            <label class="control-label" for="testfile">上传文件</label>
                            <input type="file" id="testfile" name="file" class="file-loading" />
                            <input type="hidden" id="goodsImage" />
                        </div>
                </div>
                <div class="form-group row">
                    <label for="id_home_title" class="col-sm-2 col-form-label">首页展示(综合排名)</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="goodsWeight">
                            <option value="1">是</option>
                            <option value="2" >否</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="saveTitle" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="uploadModel" tabindex="-1" role="dialog" aria-labelledby="uploadModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">发布商品</h4>
                <input type="hidden" id="goodsId" />
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="id_title_url" class="col-sm-2 col-form-label">游戏</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="goodsType1">
                            <option value="1">原神</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="id_title_url" class="col-sm-2 col-form-label">系统</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="goodsSys1">
                            <option value="官服">官服</option>
                            <option value="B服" >B服</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="id_home_title" class="col-sm-2 col-form-label">商品价格</label>
                    <div class="col-sm-8">
                        <input  id="goodsPrice1" name="titleName"  placeholder="请输入商品编号"  class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="id_home_title" class="col-sm-2 col-form-label">商品图片</label>
                    <div class="col-sm-8">
                        <label class="control-label" for="testfile">上传文件</label>
                        <input type="file" id="testfile1" name="file" class="file-loading" />
                        <input type="hidden" id="goodsImage1" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="id_home_title" class="col-sm-2 col-form-label">首页展示(综合排名)</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="goodsWeight1">
                            <option value="1">是</option>
                            <option value="2" >否</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="updSaveBtn" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="goodsDetailsModel" tabindex="-1" role="dialog" aria-labelledby="goodsDetailsModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">商品详情</h4>
                <input type="hidden" id="goodsId1" />
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="id_home_title" class="col-sm-2 col-form-label">商品描述</label>
                    <div class="col-sm-8">
                        <textarea   style="height: 400px;max-height: 400px;"  id="goodsDetails" name="goodsDetails"  placeholder="商品描述"  class="form-control">
                        </textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="id_home_title" class="col-sm-2 col-form-label">描述图片</label>
                    <div class="col-sm-8">
                        <input type="file" id="goodsDetailImages" multiple name="file" class="file-loading" />
                        <input type="hidden" id="imageUrls" />
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button id="updGoodsDeatilsBtn" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>



<!-- system modal start -->
<div id="com-alert" class="modal" style="z-index:9999;display: none;" >
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
            </div>
            <div class="modal-body small">
                <p>[Message]</p>
            </div>
            <div class="modal-footer" >
                <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
                <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
            </div>
        </div>
    </div>
</div>
<!-- system modal end -->

<#include "public/public_js.ftl">
<script src="/js/themes/page.js?type=aaddcc"></script>
<script type="text/javascript" src="/js/fileinput.min.js"></script>
<script>
    /***
     * 模态框封装
     */
    $(function () {
        window.Modal = function () {
            var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
            var alr = $("#com-alert");
            var ahtml = alr.html();

            var _tip = function (options, sec) {
                alr.html(ahtml);    // 复原
                alr.find('.ok').hide();
                alr.find('.cancel').hide();
                alr.find('.modal-content').width(500);
                _dialog(options, sec);

                return {
                    on: function (callback) {
                    }
                };
            };

            var _alert = function (options) {
                alr.html(ahtml);  // 复原
                alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
                alr.find('.cancel').hide();
                _dialog(options);

                return {
                    on: function (callback) {
                        if (callback && callback instanceof Function) {
                            alr.find('.ok').click(function () { callback(true) });
                        }
                    }
                };
            };

            var _confirm = function (options) {
                alr.html(ahtml); // 复原
                alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
                alr.find('.cancel').show();
                _dialog(options);

                return {
                    on: function (callback) {
                        if (callback && callback instanceof Function) {
                            alr.find('.ok').click(function () { callback(true) });
                            alr.find('.cancel').click(function () { return; });
                        }
                    }
                };
            };

            var _dialog = function (options) {
                var ops = {
                    msg: "提示内容",
                    title: "操作提示",
                    btnok: "确定",
                    btncl: "取消"
                };

                $.extend(ops, options);

                var html = alr.html().replace(reg, function (node, key) {
                    return {
                        Title: ops.title,
                        Message: ops.msg,
                        BtnOk: ops.btnok,
                        BtnCancel: ops.btncl
                    }[key];
                });

                alr.html(html);
                alr.modal({
                    width: 250,
                    backdrop: 'static'
                });
            }

            return {
                tip: _tip,
                alert: _alert,
                confirm: _confirm
            }

        }();

    });

    $(function () {
      function showConfirm(msg,callback){
            Modal.confirm(
                {
                    title:'删除提示',
                    msg: msg,
                }).on( function (e) {
                callback();
            });
        }
      $('#saveTitle').on('click', function () {
          var goodsType = $("#goodsType").val();
          var goodsPrice = $("#goodsPrice").val();
          var goodsImage = $("#goodsImage").val();
          var goodsSys = $("#goodsSys").val();
          var goodsWeight = $("#goodsWeight").val();
          var dataJson = {"goodsType":goodsType,"goodsPrice":goodsPrice, "goodsImage":goodsImage, "goodsSys":goodsSys, "goodsWeight":goodsWeight}
          $.ajax({
              type: "POST",
              url: "/yuanshenzhengnengliangshouyou/admin/addGoods",
              dataType:"json",
              contentType: "application/json;charset=utf-8",
              data: JSON.stringify(dataJson),
              success: function(data){
                  $('#addHomeTitle').modal('toggle');
                  window.location.reload();
                  // $(location).attr('href', '/admin/title');
              },
              error: function(){

              }
          });

      })
      $("[name='delBtn']").on('click', function () {
            var id = $(this).val();
            showConfirm("确认要删除吗？", function() {
                $(location).attr('href', '/yuanshenzhengnengliangshouyou/admin/delGoods?id='+id.toString());
            });
    });

        $('#testfile').fileinput({
            language: 'zh',
            uploadUrl: '/yuanshenzhengnengliangshouyou/admin/upload',
            showCaption: true,
            showUpload: false,
            showRemove: false,
            showClose: false,
            layoutTemplates:{
                actionDelete: ''
            },
            enctype: 'multipart/form-data',
            allowedFileExtensions: ['jpg','gif','png'],
            browseClass: 'btn btn-primary'
        }).on('filebatchselected', function (event, files) {//选中文件事件
            $(this).fileinput("upload");
        });

        $("#testfile").on("fileuploaded", function (event, data, previewId, index) {
            console.log(data);
            var jsonstr =JSON.stringify(data );
            $("#goodsImage").val(data.response.pathurl);
        })
        var allgoodsImage = "";
        $("[name='btnUpdGoods']").click(function (){
            var id = $(this).val();
            var dataJson = {"id":id}
            $.ajax({
                type: "POST",
                url: "/yuanshenzhengnengliangshouyou/admin/getGoodsById",
                dataType:"json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(dataJson),
                success: function(data){
                    var jsonstr =JSON.stringify(data );
                    $("#goodsType1").val(data.goodsType);
                     $("#goodsPrice1").val(data.goodsPrice);
                     $("#goodsImage1").val(data.goodsImage);
                    $("#goodsId").val(data.id);

                    $('#testfile1').fileinput({
                        language: 'zh',
                        uploadUrl: '/yuanshenzhengnengliangshouyou/admin/upload',
                        showCaption: true,
                        showUpload: false,
                        showRemove: false,
                        showClose: false,
                        layoutTemplates:{
                            actionDelete: ''
                        },
                        initialPreview: [
                            '<img width="180" src="'+data.goodsImage+'" />'
                        ],
                        enctype: 'multipart/form-data',
                        allowedFileExtensions: ['jpg','gif','png'],
                        browseClass: 'btn btn-primary'
                    }).on('filebatchselected', function (event, files) {//选中文件事件
                        $(this).fileinput("upload");
                    });

                     $("#goodsSys1").val(data.goodsSys);
                     $("#goodsWeight1").val(data.goodsWeight);
                     $('#uploadModel').modal('show');
                },
                error: function(){

                }
            });
        });




        $('#updSaveBtn').on('click', function () {
            var goodsId = $("#goodsId").val();
            var goodsType = $("#goodsType1").val();
            var goodsPrice = $("#goodsPrice1").val();
            var goodsImage = $("#goodsImage1").val();
            var goodsSys = $("#goodsSys1").val();
            var goodsWeight = $("#goodsWeight1").val();
            var dataJson = {"id":goodsId,"goodsType":goodsType, "goodsPrice":goodsPrice, "goodsImage":goodsImage, "goodsSys":goodsSys, "goodsWeight":goodsWeight}
            $.ajax({
                type: "POST",
                url: "/yuanshenzhengnengliangshouyou/admin/updGoods",
                dataType:"json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(dataJson),
                success: function(data){
                    $('#uploadModel').modal('toggle');
                    window.location.reload();
                    // $(location).attr('href', '/admin/title');
                },
                error: function(){

                }
            });

        })
        $("#testfile1").on("fileuploaded", function (event, data, previewId, index) {
            var jsonstr =JSON.stringify(data );
            $("#goodsImage1").val(data.response.pathurl);
        })

        var image = [];//图片回显
        var imageConfig = [];//预览的参数
        var list = [];//定义一个全局变量去接受文件名和id
        $("[name='btnGoodsDetails']").on('click', function () {
            $("#goodsId1").val($(this).val());
            var dataJson = {"id":$(this).val()};
            $.ajax({
                type: "POST",
                url: "/yuanshenzhengnengliangshouyou/admin/getGoodsDetailsById",
                dataType:"json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(dataJson),
                success: function(data){
                    var jsonstr = JSON.stringify(data);
                    $("#goodsDetails").val(data.goodsDeatis);
                    for(var i=0;i<data.dataList.length;i++){

                        imageConfig[i] = {url:  "/yuanshenzhengnengliangshouyou/admin/delGoodDeatilImg", key: data.dataList[i].id, extra: {id: data.dataList[i].id}}
                        image[i] = '<img src="' + data.dataList[i].goodsAttributeValue + '" class="file-preview-image kv-preview-data" style="width:auto;height:auto;max-width:100%;max-height:100%;">';
                    }


                    $('#goodsDetailImages').fileinput({
                        language: 'zh',
                        uploadUrl: '/yuanshenzhengnengliangshouyou/admin/uploadDeatil',
                        showCaption: true,
                        showUpload: false,
                        showRemove: false,
                        showClose: false,
                        overwriteInitial: false,
                        initialPreview:image,
                        initialPreviewConfig:imageConfig,
                        layoutTemplates:{
                            actionZoom:''
                        },
                        uploadExtraData:function (previewId, index) {
                            var id= $("#goodsId1").val();
                            var data = {
                                goodsId : id
                            };
                            return data;
                        },
                        enctype: 'multipart/form-data',
                        allowedFileExtensions: ['jpg','gif','png'],
                        browseClass: 'btn btn-primary'
                    }).on('filebatchselected', function (event, files) {//选中文件事件
                        $(this).fileinput("upload");
                    }).on("fileuploaded",function (e, data, previewId, index){
                        //在上传成功事件中将服务器返回的所需数据，添加到该文件对应的div中
                        var jsonstr =JSON.stringify(data );
                        list.push({ fileId: data.response.fileid, keyID: previewId });

                    }).on("filesuccessremove", function (event,  previewId, index) {
                        for (var i = 0; i < list.length; i++) {
                            if (list[i].keyID== previewId) {
                                $.ajax({
                                    type: "POST",
                                    url: "/yuanshenzhengnengliangshouyou/admin/delGoodDeatilImg?id="+list[i].fileId,
                                    dataType:"json",
                                    contentType: "application/json;charset=utf-8",
                                    success: function(data){
                                    },
                                    error: function(){
                                    }
                                });
                                delete list[i];
                            }
                        }
                    });
                },
                error: function(){

                }
            });

            $("#goodsDetailsModel").modal("show");
        });



        $("#updGoodsDeatilsBtn").on("click",function (){
            var goodsId = $("#goodsId1").val();
            var goodsDetails = $("#goodsDetails").val();
            var dataJson = {"id":goodsId,"goodsDetails":goodsDetails};
            $.ajax({
                type: "POST",
                url: "/yuanshenzhengnengliangshouyou/admin/updGoodsDetails",
                dataType:"json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(dataJson),
                success: function(data){
                    $('#goodsDetailsModel').modal('toggle');
                    window.location.reload();
                    // $(location).attr('href', '/admin/title');
                },
                error: function(){

                }
            });
        });


        $('#goodsDetailsModel').on('hide.bs.modal', function () {
            image=[];
            imageConfig=[];
            list=[];
            $('#goodsDetailImages').fileinput("destroy");
        });

        var current = ${adminCurrent};
        var size = ${adminSize};
        var total = ${adminTotal};
        var pages = ${adminPages}

        $('#pageLimit').bootstrapPaginator({
            currentPage: current,//当前的请求页面。
            totalPages: pages,//一共多少页。
            size: "10",//应该是页眉的大小。
            bootstrapMajorVersion: 3,//bootstrap的版本要求。
            alignment: "right",
            numberOfPages: 10,//一页列出多少数据。
            onPageClicked: function (event,originalEvent,type,page) {
                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                currentPage = page;
                current = page;
                window.location.href="/yuanshenzhengnengliangshouyou/admin/goodsPage?current="+page;
            },
            itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            }
        });
    });
</script>
</body>

</html>
